<!-- 置换专区首页 -->
<template>
	<view class="container">
		<view class="header">
			<view class="searchBox">
				<view class="search">
					<icon class="searchIcon" type="search" :size='20' color='#999'></icon>
					<input class="searchInp" type="text" confirm-type="search" v-model="keyword" placeholder="请输入商品名称" @confirm="search" />
				</view>
			</view>
			<view class="navbar">
				<view class="nav-item" :class="{current: filterIndex == index}" v-for="(item,index) in shellList" :key="index" v-if="index!=0"
				 @click="tabClick(index,item)">
					{{item.name}}专区
				</view>
			</view>
		</view>

		<view class="goods-list">
			<view class="cardInfo" :style="{backgroundColor: cardColor}">
				<view class="info">
					<view class="a">{{selectCard.name||''}}数量</view>
					<view class="b">
						{{selectCard.count||'0'}}
					</view>
				</view>
			</view>
			<view class="cardInfoMin" :class="minShow?'minShow':''" :style="{backgroundColor: cardColor}">
				<text class="a">{{selectCard.name||''}}数量</text>
				<text class="b">{{selectCard.count||0}}</text>
			</view>
			<empty v-if="emptyShow" :custom="true" src="/mall/static/images/no-goods.png" text="无相关商品"></empty>
			<goods-block :goodsList="goodsList" :shellType="id" :shell="true" :scrollTop="scrollTop"></goods-block>
			<uni-load-more class="loadMore" iconType="circle" :status="loadStatus" :contentText="contentText"></uni-load-more>
		</view>
		<view class="cart" :style="{borderColor: cardColor}" @tap="navTo('/mall/permutation/perCart')">
			<image class="cartIcon" src="../static/images/tubiao.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import empty from "@/components/empty/empty";
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue'
	import goodsBlock from "@/components/goodsBlock/goodsBlock.vue"
	import {
		getProducts
	} from '@/api/mall.js'
	import {
		shellList
	} from "@/api/shell.js"
	export default {
		components: {
			uniLoadMore,
			goodsBlock,
			empty
		},
		data() {
			return {
				id: null,
				filterIndex: 1, //teb索引
				emptyShow: false, //商品列表为空时展示
				loadStatus: "loading",
				contentText: {
					contentdown: "上拉显示更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多了"
				},
				page: 1,
				limit: 14,
				keyword: '', //搜索关键词
				shellList: [], //用户贝壳数据
				selectCard: {}, //当前所在专区
				goodsList: [],
				cardColor: "",
				minShow: false,
				scrollTop: 0
			}
		},
		onLoad(option) {
			this.id = option.id
			if (this.id == 2) {
				this.cardColor = '#FADB27'
			} else if (this.id == 3) {
				this.cardColor = '#FF9271'
			} else if (this.id == 4) {
				this.cardColor = '#84C8FD'
			}
			shellList().then(res => {
				this.filterIndex = Number(this.id ) - 1
				this.shellList = res.data.shell_list
				this.shellList.forEach((item,index) => {
					if (item.id == option.id) {
						this.selectCard = item
					}
				})
			})
			this.loadData()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
			if (e.scrollTop > 100) {
				this.minShow = true
			} else {
				this.minShow = false
			}
		},
		//加载更多
		onReachBottom() {
			if (this.loadStatus == "more")
				(this.loadStatus = "loading"), this.loadData();
		},
		methods: {
			loadData() {
				getProducts({
					page: this.page,
					limit: this.limit,
					replacement: 1,
					replacement_type: this.id,
					keyword: this.keyword,
				}).then(res => {
					this.loadStatus = "more";
					this.goodsList.push.apply(this.goodsList, res.data);
					if (res.data.length < this.limit) this.loadStatus = "noMore"; //判断所有数据是否加载完成；
					this.page = this.page + 1;
					if (this.goodsList.length == 0) {
						this.contentText.contentnomore = ''
						this.emptyShow = true
					} else {
						this.emptyShow = false
						this.contentText.contentnomore = '没有更多了'
					}
				})
			},
			search() {
				this.loadStatus = "loading";
				this.page = 1;
				this.goodsList = [];
				this.emptyShow = false
				this.loadData()
			},
			tabClick(index, item) {
				this.filterIndex = index
				this.id = item.id
				if (this.id == 2) {
					this.cardColor = '#FADB27'
				} else if (this.id == 3) {
					this.cardColor = '#FF9271'
				} else if (this.id == 4) {
					this.cardColor = '#84C8FD'
				}
				this.selectCard = item
				this.loadStatus = "loading";
				this.page = 1;
				this.goodsList = [];
				this.emptyShow = false
				this.loadData()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.container {
		.header {
			position: sticky;
			left: 0;
			top: 0;
			background: #fff;
			z-index: 1000;

			.searchBox {
				padding: 20rpx 30rpx;

				.search {
					position: relative;

					.searchIcon {
						position: absolute;
						left: 20rpx;
						top: 14rpx;
					}

					.searchInp {
						width: 690rpx;
						height: 68rpx;
						padding-left: 80rpx;
						font-size: 24rpx;
						box-sizing: border-box;
						background: rgba(247, 247, 247, 1);
						border-radius: 34rpx;
					}
				}
			}

			.navbar {
				display: flex;
				width: 100%;
				height: 80rpx;
				box-shadow: 0 5rpx 5rpx rgba(0, 0, 0, .06);

				.nav-item {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					height: 100%;
					font-size: 30rpx;
					color: $font-color-dark;
					position: relative;

					&.current {
						color: $mall-price;

						&:after {
							content: '';
							position: absolute;
							left: 50%;
							bottom: 0;
							transform: translateX(-50%);
							width: 160rpx;
							height: 0;
							border-bottom: 4rpx solid $mall-price;
						}
					}
				}
			}
		}

		.goods-list {
			padding: 20rpx 30rpx;

			.cardInfo {
				position: relative;
				margin: 0 auto 30rpx;
				width: 690rpx;
				height: 180rpx;
				padding: 0 78rpx 0 30rpx;
				box-sizing: border-box;
				background: rgba(250, 219, 40, 1);
				border-radius: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				z-index: 999;

				.info {
					display: flex;
					flex-direction: column;
					justify-content: center;

					.a {
						font-size: 34rpx;
						font-weight: 600;
						color: rgba(52, 52, 52, 1);
						margin-bottom: 30rpx;
					}

					.b {
						font-size: 36rpx;
						font-weight: bold;
						color: rgba(255, 255, 255, 1);
					}
				}
			}

			.cardInfoMin {
				position: fixed;
				left: 0;
				top: 232rpx;
				transform: translateX(-100%);
				transition: transform 0.1s;
				padding: 10rpx 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				height: 90rpx;
				background: rgba(249, 219, 39, 1);
				border-radius: 0px 8rpx 8rpx 0px;
				z-index: 99;

				.a {
					font-size: 20rpx;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
				}

				.b {
					font-size: 24rpx;
					font-weight: bold;
					color: rgba(255, 255, 255, 1);
				}
			}

			.minShow {
				transform: translateX(0%);
				transition: transform 0.3s;
			}
		}

		.cart {
			position: fixed;
			right: 30rpx;
			bottom: 120rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			background-color: #fff;
			border: 6rpx solid rgba(250, 219, 40, 1);
			box-sizing: border-box;
			box-shadow: 0 0 10rpx rgba(0, 0, 0, .2);
		
			.cartIcon {
				width: 45rpx;
				height: 40rpx;
			}
		}
	}
	/deep/ .empty-content{
		top:188rpx!important;
	}
</style>
